<template>
  <el-container class="main-wrap">
    <el-button
      id="backTopBtn"
      style="
        display: none;
        font-size: 20px;
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 2000;
      "
      type="ghost"
      icon="CaretTop"
      size="medium"
      circle
      @click="backTop()"
    />
      <el-header
        :class="$store.state.app.isShowHeader ? 'headerShow' : 'headerHide'"
        id="main-header"
        style="height: 50px"
      >
        <main-header></main-header>
      </el-header>
      <div v-if="$store.state.app.infoLinkSwitch == 1" class="top-info">
        <!--        click <a style="color: black" :href="oldLegoLink">link</a> to old lego-->
        <!--        system & click <a style="color: black" :href="oldDfareLink">link</a> to-->
        <!--        old dfare system-->
        PAX incentive create new interface is online, feel free to give it a
        try! ps: we also provide links to the classic version to take you back
        to the old version.
        <div
          style="position: absolute; right: 5px; top: 0; cursor: pointer"
          @click="closeInfo"
        >
          <i class="el-icon-close"></i>
        </div>
      </div>
      <el-container>
        <MainMenu
          v-if="resolvedMenuList"
          :menu-list="menuList"
          @on-select="linkToPage"
        ></MainMenu>
        <el-main>
<!--          <tags-view />-->
          <section
            class="page-content"
            :style="{
              background: themeBackground,
            }"
          >
            <transition name="fade-transform" mode="out-in">
              <keep-alive
                :include="cacheRouter"
                :exclude="[
                  'CityPrediction',
                  'JSONDetail',
                  'GuidelinesReport',
                  'GuidelinesCreate',
                  'AnalyzeConfigDetail',
                  'EventSets',
                  'EventSetsDetail',
                  'OfflineFeatureRegister',
                  'RTFeatureRegister',
                  'FeatureManager',
                  'FeatureTaskManager',
                  'BasicPricingSubmitView',
                  'BasicPricingSubmitEdit',
                  'BasicPricingStrategyEdit',
                  'BasicPricingApprove',
                  'ModulePipelineEdit',
                  'ModulePipelineView',
                  // 'ModulePipeline',
                ]"
              >
                <router-view v-if="$store.state.app.permission === 'yes'" />
                <no-permission v-else />
              </keep-alive>
            </transition>
            <template v-for="item in frames" :key="item.name">
              <Base-frame-panel
                :src="item.name"
                :name="item.name"
              >
              </Base-frame-panel>
            </template>
          </section>
          <!--          <div class="footer">DiDi International Marketplace</div>-->
        </el-main>
      </el-container>
  </el-container>
</template>

<script>
import MainMenu from './MainMenu.vue'
import MainHeader from './MainHeader.vue'
import BaseFramePanel from '@/views/home/MainFramePanel.vue'
import TagsView from '@/views/home/TagsView/index.vue'
import menu from '../../utils/menu.js'
import Cookies from 'js-cookie'
import { getLocal, setCookie } from '@/utils/navigation'
import noPermission from '@/views/error/401.vue'
import { zcGetWeek } from '@/utils/tools'

export default {
  name: 'Main',
  components: { MainHeader, TagsView, MainMenu, BaseFramePanel, noPermission },
  data() {
    return {
      menuList: [], // 菜单数据
      resolvedMenuList: false, // 菜单dom 渲染开关
      timer: null, // 导航菜单防抖节流
      // infoSwitch: true,
      initPage: true, // 是否正在加载页面(页面开关)
    }
  },
  computed: {
    themeBackground() {
      try {
        // 设置主题背景色 增加0.3透明度
        return this.$store.state.app.themeColor + '08'
      } catch (e) {
        return ''
      }
    },
    cacheRouter() {
      return this.$store.state.tagsView.cachedViews
    },
    active() {
      return this.$store.state.tagsView.currentView.name === this.$route.name
    },
    frames: function () {
      return this.$store.state.tagsView.visitedViews.filter(function (item) {
        return item.name.indexOf('link2Frame_') > -1
      })
    },
  },
  mounted() {
    this.initPage = false
    // 设置本地环境Cookie
    // this.setLocalEnv()
    // 设置环境
    this.setEnvironment()
    // 初始化菜单
    this.renderMenuList()
    // 初始化header 自动收缩
    // this.setHeader()
    // 初始化国家和城市下拉数据
    // this.$store.dispatch('getSearchFormList')
    // 初始化司补国家下拉菜单
    // this.$store.dispatch('getDfareCountryList')
    // 获取权限信息
    // this.$store.dispatch('getAllowPage').then(() => {
    //   this.initPage = false
    // })
    // 设置水印
    // try {
    //   this.addWaterMark()
    // } catch (e) {
    //   this.$message.error('set water mark fail')
    // }
    // 设置 全局通知
    // this.setHeaderInfo()
  },
  methods: {
    closeInfo() {
      this.$store.commit('setInfoSwitch', 2)
    },
    setHeaderInfo() {
      // 设置全局通知栏 1: 打开 其他 关闭
      if (!this.$T.isTrue(getLocal('setInfoSwitch'))) {
        this.$store.commit('setInfoSwitch', 1)
      }
    },
    handleHeaderCollapse() {
      console.log('---')
      if (this.$store.state.app.isShowHeader) {
        this.$store.commit('setIsShowHeader', false)
      } else {
        this.$store.commit('setIsShowHeader', true)
      }
    },
    setLocalEnv() {
      if (this.$ENV.NODE_ENV === 'development') {
        setCookie(
          'user-fingerprint-water-mark',
          '20220207-1908-sevenzhang-3d410543-b69c-4f74-be6c-e6ce400ae643'
        )
        setCookie(
          '__hash__wa',
          '20220207-1908-sevenzhang-3d410543-b69c-4f74-be6c-e6ce400ae643'
        )
        setCookie('SSO_AS_UID', 'sevenzhang')
        setCookie('SSO_AS_UID3114', 'sevenzhang')
        setCookie(
          'SSO_AS_SUB_TICKET3114',
          '3d825361a00c495a925c0f314ee261610002200260000'
        )
        setCookie('__hash__cache', '3d410543-b69c-4f74-be6c-e6ce400ae643')
        setCookie(
          'SSO_AS_SUB_TICKET_LEGO',
          'e324e9d75b1578eddf7e38550b0ea2ce0002560000'
        )
        setCookie(
          'SSO_AS_SUB_TICKET_DINTL_DFARE',
          'e324e9d75b1578eddf7e38550b0ea2ce0002560000'
        )
        setCookie('language', 'zh_CN')
      }
    },
    addWaterMark() {
      /* eslint-disable */
      waterMark({
        // 使用必须传入这两个参数
        // 一个页面不能反复初始话，反复初始话会报警告
        // 系统ID
        systemId: '1908',
        // 当前用户ID 邮箱前缀
        userId: Cookies.get('SSO_AS_UID'),

        // 以下两个参数控制水印横向和纵向间距，调整参数即可调整水印密集程度
        // 宽度上的间距，内部会根据文字长度自动获取一个宽度imgWidth再加上这个imgWidthDis  -->width = imgWidth + imgWidthDis
        imgWidthDis: 100,
        // 高度上的间距，内部会根据文字长度自动获取一个高度imgHeight再加上这个imgWidthDis -->height = imgHeight + imgHeightDis
        imgHeightDis: 100,

        // 文字样式，理论上不允许随意更改水印文字样式
        // 只支持修改文字颜色和透明度，文字透明度要求在0.03以上
        textStyle: 'rgba(0,0,0,0.03)',
        // 水印的z-index
        zIndex: 10000,
        // 需要打水印的容器 El的position不能是static，如果是static会被默认改为relative，这样水印才会生效
        containerEl: document.body,
        // 监视时间间隔
        time: 1500,
        // 是否直接禁用掉鼠标右键Î
        disableContextMenu: false,
        // 是否启用，不让其选择，默认不启用
        disableSelect: false,
        // 不能选择的区域，传入一个原生dom元素
        disableSelectEl: '',
        // 是否禁止拷贝
        disableCopy: false,
        // 禁止复制的元素容器
        disableCopyEl: '',
        // 打印页面属于的字体颜色
        printColor: 'rgba(0, 0, 0, 0.5)',
      })
    },
    setEnvironment() {
      // 设置环境变量
      let url = location.origin
      let envPre = 'us'
      if (url.indexOf('testproduct') > -1) {
        envPre = 'us'
      } else {
        envPre = 'sim'
      }
      this.$store.commit('setEnvironment', envPre)
    },
    setHeader() {
      // 设置导航菜单自动显示隐藏
      let browser = this.$T.getBrowserType()
      let eventType = browser === 'Firefox' ? 'DOMMouseScroll' : 'mousewheel'
      window.addEventListener(
        eventType,
        (e) => {
          let detail = e.deltaY || e.detail
          if (detail > 100 || detail < -100) {
            this.timer = this.$T._.debounce(() => {
              // 控制header显示隐藏
              if (this.$store.state.app.isLockHeader === false) {
                if (detail > 0) {
                  this.$store.commit('setIsShowHeader', false)
                }
                if (detail < 0) {
                  this.$store.commit('setIsShowHeader', true)
                }
              }
              if (this.timer !== null) {
                this.timer.cancel()
              }
            }, 80)
            this.timer()
          }
        },
        false
      )
    },
    backTop() {
      // 回到顶部事件
      let dot = document.getElementsByClassName('page-content')[0]
      dot.scroll({
        top: 0,
        left: 0,
        behavior: 'smooth',
      })
      this.$store.commit('setIsShowHeader', true)
    },
    linkToPage(route) {
      let { name, params, query } = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      // 是否iframe嵌套
      let obj = this.$T.recursion(this.menuList, 'name', route)
      this.$store.dispatch('tagsView/addView', obj)
      this.$router.push({
        name,
        params,
        query,
      })
    },
    renderMenuList() {
      this.menuList = menu.menuList
      this.resolvedMenuList = true
    },
  },
}
</script>

<style lang="less">
.main-wrap {
  text-align: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .top-info {
    position: relative;
    background: #f8d000;
    text-align: center;
    width: 100%;
  }
  #main-header {
    position: relative;
  }
  .header-collapse {
    position: absolute;
    right: 7px;
    bottom: -46px;
    height: 53px;
    width: 3px;
    z-index: 2;
    opacity: 0.8;
  }
  .header-ball {
    width: 12px;
    height: 12px;
    border-radius: 10px;
    position: absolute;
    bottom: -10px;
    left: -4.6px;
    z-index: 2;
    transition-duration: 0.3s;
  }
  .header-ball:hover {
    transform: scale(1.5);
    transition-duration: 0.3s;
  }
  .header-back-top {
    border: none;
    position: absolute;
    padding: 0;
    background: rgb(255, 119, 119);
    color: #606266;
    right: 2.5px;
    top: 42px;
    z-index: 3;
  }
  .headerShow {
    animation: headerShow 0.2s linear;
    animation-fill-mode: forwards;
  }
  .headerHide {
    animation: headerHide 0.2s linear;
    animation-fill-mode: forwards;
  }
  @keyframes headerShow {
    from {
      margin-top: -50px;
    }
    to {
      margin-top: 0;
    }
  }
  @keyframes headerHide {
    from {
      margin-top: 0;
    }
    to {
      margin-top: -50px;
    }
  }
  .page-content {
    background: #f9fcff;
    position: absolute;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    width: 100%;
  }
  .el-header {
    padding: 0;
  }
  .el-main {
    position: relative;
    background-color: transparent;
    padding: 0;
    overflow: hidden;
  }
  .fade-transform-leave-active,
  .fade-transform-enter-active {
    transition: all 0.5s;
  }

  .fade-transform-enter {
    opacity: 0;
    transform: translateX(-30px);
  }

  .fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
}
.footer {
  position: fixed;
  z-index: 3;
  bottom: 0;
  width: 100%;
  line-height: 1.5;
  background: white;
  color: #909399;
  text-align: center;
}
</style>
